<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 后端管理系统</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="./js/html5.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body id="container">
<nav>
    <ul>
        <li>
            <i class="fa fa-navicon fa-lg toggle-nav" style="font-size: 25px;"></i>
            <a href="" class="a-logo">水晶球教育后台管理系统</a>
        </li>
        <li class="nav-li-manage">
            <img class="manage_avatar" src="http://demo.mycodes.net/houtai/AdminLTE/dist/img/user2-160x160.jpg" alt="">
            <a href="#">管理员</a>
            <span class="fa  fa-caret-right arrow" style="float: right;line-height: 55px"></span>
            <ul>
                <li>个人资料</li>
                <li>修改密码</li>
                <li>设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</nav>
<section>
    <div id="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="index.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="tab.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>tab页</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>系统管理</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="manage_user.html">系统用户管理</a></li>
                    <li><a class="" href="users.html">用户管理</a></li>
                </ul>
            </li>
            <li>
                <a href="awesome.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>font-awesome</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>常用 UI组件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="button.html">按钮</a></li>
                    <li><a class="" href="form.html">表单</a></li>
                    <li><a class="" href="table.html">表格</a></li>
                </ul>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>Jquery 插件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="datatables.html">datatables 表格</a></li>
                    <li><a class="" href="select2.html">select2 下拉框</a></li>
                    <li><a class="" href="layui.html">layui 弹出层</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <section class="wrapper toggle-wrapper">
        <div class="container-fluid">
            <h1 style="text-align: center;">用户信息</h1>
            <div class="row">
                <div class="col-xs-6 user-profile">
                    <img src="./img/avar.jpg" alt="">
                    <h3 class="profile-username text-center">Nina Mcintire</h3>
                    <p class="text-muted text-center">软件工程师</p>
                    <ul class="list-group list-group-unbordered">
                        <li class="list-group-item">
                            <b>关注</b> <a class="pull-right">1,322</a>
                        </li>
                        <li class="list-group-item">
                            <b>粉丝</b> <a class="pull-right">543</a>
                        </li>
                        <li class="list-group-item">
                            <b>朋友</b> <a class="pull-right">13,287</a>
                        </li>
                    </ul>
                    <button class="btn btn-default btn-primary">关注</button>
                </div>
                <div class="col-xs-6 about-me">
                    <h2>关于我</h2>
                    <div class="box-body">
                        <strong><i class="fa fa-book margin-r-5"></i> 教育经历</strong>
                        <p class="text-muted">
                            计算机科学学士学位田纳西大学诺克斯维尔分校
                        </p>

                        <hr>

                        <strong><i class="fa fa-map-marker margin-r-5"></i> 地区</strong>
                        <p class="text-muted">马布里, 加利福尼亚</p>

                        <hr>

                        <strong><i class="fa fa-pencil margin-r-5"></i> 技能</strong>
                        <p>
                            <span class="label label-danger">UI 设计</span>
                            <span class="label label-success">编码</span>
                            <span class="label label-info">Javascript</span>
                            <span class="label label-warning">PHP</span>
                            <span class="label label-primary">Node.js</span>
                        </p>

                        <hr>

                        <strong><i class="fa fa-file-text-o margin-r-5"></i> 笔记</strong>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6 user-profile">
                    <img src="./img/cat.jpg" alt="">
                    <h3 class="profile-username text-center">Nina Mcintire</h3>
                    <p class="text-muted text-center">捕鼠能手</p>
                    <ul class="list-group list-group-unbordered">
                        <li class="list-group-item">
                            <b>关注</b> <a class="pull-right">1,322</a>
                        </li>
                        <li class="list-group-item">
                            <b>粉丝</b> <a class="pull-right">543</a>
                        </li>
                        <li class="list-group-item">
                            <b>朋友</b> <a class="pull-right">13,287</a>
                        </li>
                    </ul>
                    <button class="btn btn-default btn-primary">关注</button>
                </div>
                <div class="col-xs-6 about-me">
                    <h2>关于我</h2>
                    <div class="box-body">
                        <strong><i class="fa fa-book margin-r-5"></i> 教育经历</strong>
                        <p class="text-muted">
                            计算机科学学士学位田纳西大学诺克斯维尔分校
                        </p>

                        <hr>

                        <strong><i class="fa fa-map-marker margin-r-5"></i> 地区</strong>
                        <p class="text-muted">马布里, 加利福尼亚</p>

                        <hr>

                        <strong><i class="fa fa-pencil margin-r-5"></i> 技能</strong>
                        <p>
                            <span class="label label-danger">UI 设计</span>
                            <span class="label label-success">编码</span>
                            <span class="label label-info">Javascript</span>
                            <span class="label label-warning">PHP</span>
                            <span class="label label-primary">Node.js</span>
                        </p>

                        <hr>

                        <strong><i class="fa fa-file-text-o margin-r-5"></i> 笔记</strong>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .row {
                margin-top: 20px;
            }

            .user-profile, .about-me {
                border: 1px solid #ccc;
                border-top: 2px solid #3c8dbc;
                padding: 20px 10px;
                border-bottom: none;
            }

            .user-profile {
                border-right: none;
            }

            .about-me {
                border-left: none;
                padding-top: 44px;
            }

            .user-profile button {
                width: 100%;
                margin-top: 20px;
            }

            .user-profile h3 {
                text-align: center;
            }

            .user-profile ul li {
                padding: 10px 5px;
                border-top: 1px solid #ccc;
            }

            .user-profile p {
                text-align: center;
            }

            .user-profile img {
                width: 20%;
                margin: auto;
                display: block;
                border-radius: 100%;
                border: 2px solid #ccc;
                padding: 5px;
            }
        </style>
    </section>
</section>
</body>
<script src="js/jquery.js"></script>
<script src="js/zhao.js"></script>
</html>